<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客列表</title>
        <link rel="stylesheet" href="css/list.css">
        <link rel="stylesheet" href="css/blog_list.css">
        <style>
            .nav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 50px;
            }

            .container {
                padding-top: 80px;
                height: auto;
            }

            .container-right {
                width: auto;
            }

            .blog-pagnation-wrapper {
                height: 40px;
                margin: 16px 0;
                text-align: center;
            }

            .blog-pagnation-item {
                display: inline-block;
                padding: 8px;
                border: 1px solid #d0d0d5;
                color: #333;
            }

            .blog-pagnation-item:hover {
                background: #4e4eeb;
                color: #fff;
            }

            .blog-pagnation-item.actvie {
                background: #4e4eeb;
                color: #fff;
            }
        </style>
        <script src="js/jquery.min.js"></script>
        <script src="js/urltool.js"></script>
    </head>

    <body>
        <!-- 导航栏 -->
        <div class="nav">
            <img src="img/logo2.jpg" alt="">
            <span class="title">我的博客系统</span>
            <!-- 用来占据中间位置 -->
            <span class="spacer"></span>
            <span id="userElement">
                <a href="blog_edit.html">写博客</a>
                <a href="#">注销</a>
            </span>
            <a id="loginElement" href="login.html">登陆</a>
        </div>
        <!-- 版心 -->
        <div class="container">
            <!-- 右侧内容详情 -->
            <div class="container-right" style="width: 100%;">
                <div id="artlist">
                    <!-- 每一篇博客包含标题, 摘要, 时间 -->

                </div>


                <hr>
                <div id="pageDiv" class="blog-pagnation-wrapper">
                    <button class="blog-pagnation-item" onclick="toFirst()">首页</button>
                    <button class="blog-pagnation-item" onclick="doPre()">上一页</button>
                    <button class="blog-pagnation-item" onclick="doNext()">下一页</button>
                    <button class="blog-pagnation-item" onclick="doLast()">末页</button>
                </div>
            </div>
        </div>

        <script>
            var pageIndex = 1;  //当前页码从1开始
            var pageSize = 2;  //每页显示最大条数
            var pageCount = 1;   //总页数
            //判断用户是否已经登录
            function isLogin() {
                jQuery.ajax({
                    url: "/user/islogin",
                    type: "POST",
                    data: {},
                    success: function (res) {
                        if (res.code == 200 && res.data == 1) {
                            //说明已经登录
                            jQuery("#loginElement").hide(); // 隐藏html控件
                            jQuery("#userElement").show(); // 显示html 控件
                        } else {
                            //没有登录
                            jQuery("#loginElement").show(); // 隐藏html控件
                            jQuery("#userElement").hide(); // 显示html 控件
                        }
                    }
                });
            }
            isLogin();

            //初始化页面
            function pageInit() {
                var paramPageIndex = getParamBykey("pageIndex");
                var paramPageSize = getParamBykey("pageSize");
                if (paramPageIndex != null) {
                    pageIndex = paramPageIndex;
                }
                if (paramPageSize != null) {
                    pageSize = paramPageSize;
                }
                doAjax();
            }
            pageInit();
            //点击首页
            function toFirst() {
                if (pageIndex <= 1) {
                    alert("抱歉：不能跳转啦，当前已经在首页！");
                    return false;
                }
                pageIndex = 1;
                location.href = "blog_list.html?pageIndex=" + pageIndex + "&pageSize" + pageSize;
            }
            //点击上一页
            function doPre() {
                if (pageIndex <= 1) {
                    alert("抱歉：不能跳转啦，当前已经在首页！");
                    return false;
                }
                --pageIndex;
                location.href = "blog_list.html?pageIndex=" + pageIndex + "&pageSize" + pageSize;
            }
            //点击下一页
            function doNext() {
                if (pageIndex >= pageCount) {
                    alert("抱歉，您已经在最后一页了，无需跳转 ");
                    return false;
                }
                ++pageIndex;
                location.href = "blog_list.html?pageIndex=" + pageIndex + "&pageSize" + pageSize;
            }
            //点击末页
            function doLast() {
                if (pageIndex >= pageCount) {
                    alert("抱歉，您已经在最后一页了，无需跳转 ");
                    return false;
                }
                location.href = "blog_list.html?pageIndex=" + pageCount + "&pageSize" + pageSize;
            }
            //请求后端得到数据并展示列表
            function doAjax() {
                //1. 得到当前页面的文章列表数据
                jQuery.ajax({
                    url: "/art/getlistbypage",
                    type: "POST",
                    data: {
                        "pageIndex": pageIndex,
                        "pageSize": pageSize
                    },
                    success: function (res) {
                        if (res.code == 200 && res.data.length > 0) {
                            //从后端查询到数据，进行列表展示
                            var artlistHtml = "";
                            for (var i = 0; i < res.data.length; i++) {
                                var item = res.data[i];
                                artlistHtml += '<div class="blog">';
                                artlistHtml += '<div class="title">' + item.title + '</div>';
                                artlistHtml += '<div class="date">' + item.createtime + '</div>';
                                artlistHtml += '<div class="desc">' + item.content + '</div>';
                                artlistHtml += '<a href="blog_content.html?id=' + item.id + '" class="detail"> 文章详情 &gt;&gt;</a>';
                                artlistHtml += '</div>';
                            }
                            jQuery("#artlist").html(artlistHtml);
                            jQuery("#pageDiv").show();
                        } else {
                            jQuery("#pageDiv").hide();
                            jQuery("#artlist").html("<h2 style='margin-left:100px; margin-top='100px'>暂无文章</h2>");
                        }
                    }
                });
                //2. 查询文章的总条数 -- 得出当前总页数
                jQuery.ajax({
                    url: "/art/getcount",
                    type: "POST",
                    data: {},
                    success: function (res) {
                        if (res.code == 200 && res.data > 0) {
                            //计算总页数
                            pageCount = Math.ceil(res.data / pageSize); //计算之后得到的结果可能是小数，需要向上取整
                        }
                    }
                });
            }
        </script>
    </body>

</html>